<template>
    <div class="w_content">
        <div class="left l">
            <ol class="ol1">
                <li class="active">
                    用户注册
                </li>
            </ol>
        </div>
        <div class="right r">
            <ul class="ul1">
                <li>
                    <h2 class="h2"><span>用户注册</span></h2>
                    <div>
                        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm basic" id="basic" accept-charset="UTF-8">
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-form-item label="姓名：" prop="personName">
                                        <el-input v-model="ruleForm.personName" id="personName" placeholder="请输入姓名"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="性别：" prop="personGender">
                                        <el-radio-group v-model="ruleForm.personGender">
                                            <el-radio label="男"></el-radio>
                                            <el-radio label="女"></el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="12">
                                <el-form-item label="密码：" prop="personPassword">
                                        <el-input v-model="ruleForm.personPassword" id="personPassword" placeholder="请输入密码"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="身份证号码：" prop="certificateNumber">
                                        <el-input v-model="ruleForm.certificateNumber" id="certificateNumber" placeholder="请输入身份证号码"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-form-item label="手机号码：" prop="mobilePhone">
                                        <el-input v-model="ruleForm.mobilePhone" id="mobilePhone" placeholder="请输入手机号码"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="电子邮箱：" prop="email">
                                        <el-input v-model="ruleForm.email" id="email" placeholder="请输入电子邮箱"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20" class="hujiAddress">
                                <el-form-item label="户籍所在地:">
                                    <linkage @hujisuozaidifn="hujisuozaidifnsss2"></linkage>
                                </el-form-item>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-form-item class="select2" label="人员类别：" prop="A002">
                                        <el-select v-model="ruleForm.A002" placeholder="请选择人员类别">
                                            <el-option label="退役士兵" value="退役士兵"></el-option>
                                            <el-option label="军转干部" value="军转干部"></el-option>
                                            <el-option label="军队离退休干部和退休士官" value="军队离退休干部和退休士官"></el-option>
                                            <el-option label="军队无军籍离退休职工" value="军队无军籍离退休职工"></el-option>
                                            <el-option label="退伍红军" value="退伍红军"></el-option>
                                            <el-option label="复员军人" value="复员军人"></el-option>
                                            <el-option label="残疾军人" value="残疾军人"></el-option>
                                            <el-option label="伤残民兵民工" value="伤残民兵民工"></el-option>
                                            <el-option label="烈士遗属" value="烈士遗属"></el-option>
                                            <el-option label="因公牺牲遗属" value="因公牺牲遗属"></el-option>
                                            <el-option label="病故军人遗属" value="病故军人遗属"></el-option>
                                            <el-option label="现役军人家属" value="现役军人家属"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-form-item>
                                    <el-button type="primary" @click="submitForm('ruleForm')">立即注册</el-button>
                                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                                </el-form-item>
                            </el-row>
                        </el-form>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import linkage from '@/components/element/linkage'
import interface_s from '@/api/api.js'
export default {
    data(){
        return {
            ruleForm: { //默认数据
                personName:'',// 姓名：
                personGender:'',//性别：
                personPassword:'',//密码：
                certificateNumber:'',//身份证号码：
                hujiAddress:'',//户籍地址：
                email:'@qq.com',//电子邮箱：
                A002:'',//人员类别：
                mobilePhone:''//手机号
            },
            rules: {  //规则
                personName:[
                    { required: true, message: '请选输入姓名', trigger: 'blur' }
                ],
                personGender:[
                    { required: true, message: '请选择性别', trigger: 'change' }
                ],
                personPassword:[
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ],
                certificateNumber:[
                    { required: true, message: '请输入身份证号码', trigger: 'blur' }
                ],
                email:[
                    { required: true, message: '请输入电子邮箱', trigger: 'blur' }
                ],
                A002:[
                    { required: true, message: '请选择人员类别', trigger: 'change' }
                ],
                mobilePhone:[
                    { required: true, message: '请输入手机号', trigger: 'blur' }
                ],
            },
        }
    },
    methods: {
        // 表单校验通过以后
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // alert('submit!');
                    let postData = this.$qs.stringify(this.ruleForm);
                    console.log(postData)
                    // 注册请求
                    this.$axios.post(this.HOST+interface_s.login_zc,postData,{
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded', 
                        }
                    })
                    .then( (response) => {
                        console.log(response);
                        if(response.data.code==0 && response.data.msg=="注册成功"){
                            this.$router.push('/')
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                    
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        hujisuozaidifnsss2(value){
            let arry = value.join(",")
            this.ruleForm.hujiAddress = arry
            console.log(this.ruleForm.hujiAddress)
        }
    },
    components:{
        linkage
    },
    created(){
        console.log(interface_s)
        
    }
}
</script>

<style scoped>
.el-row {
    margin-bottom: 20px;
}
.el-row:last-child {
    margin-bottom: 0;
}
</style>